﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>

        // AJAX start event
        $(document).ajaxStart(function () {
            $("#msg").text("LOADING.....................");
        });

        // AJAX complete event
        $(document).ajaxComplete(function (event, xhr, settings) {
            if (settings.url.search("counties?") > -1) {
                $("#msg").empty();
            }
        });

        
        $(document).ready(function () {
            GetCounties();
            GetCounty();

            $('#dosomething').click(function () {
                GetCounties();
            });




        });

        function GetCounties() {
            //$.getJSON('http://itsapptime.com/ws/api/counties?callback=?', function (data) {
            $.getJSON('api/counties?callback=?', function (data) {
                $('#countylist').empty();  // Clear contents if any
                $.each(data, function (i, item) {
                    $('#countylist').append('<li>' + item.countyName + '<span>' + item.locations + '</span>');
                });
            });
        }

        function GetCounty() {
            $.getJSON('api/counties/1?callback=?', function (data) {
                $('#yourid').val(data.id);
                $('#countyid').val(data.countyName);
            });
        }

    </script>
</head>
<body>
    <h2>AJAX Test with JSONP</h2>

    <div>
        <ul id="countylist">
            <!-- Dynamically Built by AJAX-->
        </ul>
    </div>
    <div>
        Your Id:
        <output id='yourid'></output><br />
        Your count:
        <output id="countyid"></output>
    </div>
    <div>&nbsp;</div>
    <div>
        <input type="button" id="dosomething" value="Do Something" />
    </div>
    <div>
        &nbsp;
    </div>
    <div><span style="font-style: italic" id="msg"></span></div>
</body>
</html>
